<template>
  <view class="page">
    <!-- topBar start -->
    <fu-custom class="text-white" :isBack="true">
      <block slot="content"><text  class="title" >{{ i18n['我的签到'] }}</text></block>
        <!-- #ifdef APP-PLUS || H5 -->
      <view slot="right" @click="navToRule"><text class="" style="font-size: 32rpx">{{ i18n['签到规则']}}</text></view>
       <!-- #endif -->
    </fu-custom>
     <!-- #ifdef MP-WEIXIN -->
    <view  class="shop_btn" @click="navToRule">{{i18n['签到规则']}}</view>
       <!-- #endif -->
    <!-- topBar end -->
    <scroll-view :style="{ height: 'calc(100% - ' + CustomBar + 'px)' }" scroll-y>
      <view class="signin-wrap">
        <view class="signin-day">
          {{ i18n['已累计签到']}}<text>{{days}}</text>{{ i18n['天']}}
        </view>
        <view class="signin-integral">{{ i18n['共获得']}}{{score}}{{ i18n['积分']}}</view>
        <view class="signin-calendar-wrap">
          <view class="signin-calendar">
            <fu-calendar mode="signin" :signinData="month_sign_info" :change-year="false" :future="true" :isDefaultDay="false" @switchChange="switchChange" v-if='update'></fu-calendar>
            <view class="signin-btn" @click="signin">{{today?i18n['已签到']:i18n['立即签到']}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    <image :src="imgWechatUrl+'/user/signin-1-icon.png'" class="icon-bg" mode="widthFix"></image>
    <!-- 签到规则 start -->
    <view class="signin-rule-popup" v-if="isRule">
      <view class="signin-mask" @click="isRule = false"></view>
      <view class="signin-rule">
        <view class="signin-content bg-white">
          <view class="text-center  text-333  padding-bottom-lg" style="font-weight: 800;font-size: 36rpx;"> {{i18n['签到规则']}}</view>
          <view class="signin-rule-content text-df text-333" style="max-height: 800rpx;overflow: auto;"><jyf-parser :html="ruleContent"></jyf-parser></view>
        </view>
        <view class="signin-close text-center padding-top-xl" @click="isRule = false"><text class="cuIcon-roundclose text-white"></text></view>
      </view>
    </view>
    <!-- 签到规则 end -->
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>
<script>
 import fuCalendar from '../../components/fu-calendar/fu-calendar.vue';
 import richText from '@/common/utils/richText.js';
export default {
  components:{fuCalendar},
  data() {
    return {
			imgWechatUrl: this.imgWechatUrl,
      update:true,
      score: 0, // {Number} 积分值
      signday: 0, // {Number} 连续签到天数
      today: 0, // {Number} 今天是否签到
      week_sign_info: [], // {Array} 本周签到信息
      sign_pop: false, // {Boolean} 签到弹窗是否显示
      signScore: 0, // {Number} 签到获取的积分
      imgHeight: 0,
      month_sign_info:[],//{Array} 本月签到信息
      isRule:false,//显示签到规则
      ruleContent:'',//签到规则
    };
  },
  computed:{
    // 本月累积签到天数
    days(){
      let len = this.month_sign_info.length;
      return len;
    }
  },
  onLoad() {
    this.getDetail();
    this.getRule();
  },
  methods: {
    switchChange(val){
      console.log(val);
      // this.start_time = val;
      this.getDetail(val);
    },
    /**
     * @description 去规则页
     */
    navToRule() {
      this.isRule = true;
      // uni.navigateTo({
      //   url: '/pages/user/signin/signin-rule/index'
      // });
    },
    /**
     * @description 获取签到详情
     */
    getDetail(start_time) {
      start_time = start_time || '';
      this.$api.post(global.apiUrls.postUserSigninDetail,{start_time:start_time}).then(res => {
        console.log(res);
        res = res.data;
        if (res.code == 1) {
          this.score = res.data.score;
          // this.signday = res.data.days;
          // this.today = res.data.today || 0;
          // this.week_sign_info = res.data.week_sign_info;
          // console.log(res.data);
          this.today = res.data.today || 0;
          let list = res.data.data;
          // 遍历查询签到的天数在日历中标出
          let arr = [];
          list.forEach(a=>{
            arr.push(a.create_time);
          })
          this.month_sign_info = arr;
          console.log(arr)
        } else {
          this.$message.info(res.msg);
        }
      });
    },
    /**
     * @description 开始签到
     */
    signin() {
      this.$api.post(global.apiUrls.postUserSignin).then(res => {
        res = res.data;
        if (res.code == 1) {
          if (res.data.status == 1) {
            // this.sign_pop = true;
            // this.signScore = res.data.score;
            this.$message.info(this.i18n['签到成功']);
            this.update =false;
            this.$nextTick(()=>{
                this.update =true;
            })
            this.getDetail();
          } else if (res.data.status == 2) {
            this.$message.info(this.i18n['今日已签到,请勿重复签到']);
          }
        } else {
          this.$message.info(res.msg);
        }
      });
    },
    /**
     * @description 获取签到规则
     */
    getRule() {
      this.$api
        .post(global.apiUrls.postUserSigninRule, { category_id: 20 })
        .then(res => {
          // console.log(res,"????");
          if (res.data.code == 1) {
            this.ruleContent = richText.format(res.data.data.content.trim());
          } else {
            this.$message.info(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err, '>>>>>>>>>>>>>>>');
        });
    }
  }
};
</script>

<style lang="scss" >
page {
  height: 100%;
}
.page {
  min-height: 100%;
  overflow-x: hidden;
  // position: relative;
  // overflow-y: scroll;
  // -webkit-overflow-scrolling: touch;
  background: url($IMG_WECHAT_URL+'/user/signin-1-bg.png') top/cover;
  position: relative;
  .icon-bg{
    position: absolute;
    bottom: 32rpx;
    right: -30rpx;
    width: 164rpx;
    height: 164rpx;

  }
}
.title{
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: 500;
}
// 签到 start
.signin-wrap {
   .signin-day{
     font-size: 36rpx;
     font-family: PingFang SC;
     font-weight: 500;
     color: #FFFFFF;
     margin: 60rpx 32rpx 0;
     text{
       font-size: 48rpx;
       margin: 0 10rpx;
     }
   }
   .signin-integral{
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      margin: 36rpx 32rpx 0;
   }
   .signin-calendar-wrap{
     margin: 64rpx 24rpx 20rpx;
     .signin-calendar{
       width: 100%;
       background: #FFFFFF;
       border-radius: 16rpx;
       overflow: hidden;
     }
   }
   .signin-btn{
     width: 540rpx;
     height: 88rpx;
     line-height: 88rpx;
     background: url($IMG_WECHAT_URL+'/user/signin-1-btn.png') no-repeat center/cover;
     margin: 46rpx auto 40rpx;
     font-size: 36rpx;
     font-family: PingFang SC;
     font-weight: 500;
     color: #F63434;
     text-align: center;

   }
}
// 签到 end
// 签到规则 start
.signin-rule-popup {
  .signin-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
  }
  .signin-rule {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    .signin-content {
      padding: 56rpx 36rpx 36rpx;
      box-sizing: border-box;
      width: 560rpx;
      min-height: 400rpx;
      max-height: 70%;
      border-radius: 16rpx;
    }
    .signin-close {
      font-size: 48rpx;
    }
  }
}
// 签到规则 end
.shop_btn {
  position: absolute;
  right: 0;
  top: 180rpx;
  border-radius: 20rpx 0 0rpx 20rpx;
  color: $fu-main-color;
  // background: rgba(255,255,255,0.65);
  background: white;
  padding: 10rpx;
  font-size: $uni-font-size-sm;
  margin-top: -1.5em;
  z-index: 99;
}
</style>
